<script>
/**
 * @desc 选择月份
 */

import { mapState } from 'vuex'
import CalendarView from '@/components/calendar-view'

export default {
  name: 'month-layer',

  props: {
    show: { type: Boolean, default: false },
    onClose: { type: Function, default: () => {} },
    onMonthClick: { type: Function, default: () => {} }
  },

  components: { CalendarView },

  data: () => ({
    year: new Date().getFullYear()
  }),

  computed: {
    ...mapState(['systemInfo'])
  }
}
</script>

<template>
  <div :class="[$sty.container, show ? '' : $sty.hide]">
    <div
      :style="{height:systemInfo.statusBarHeight+'px'}"
      name="system-status-bar"
    ></div>

    <div
      :class="$sty.topBar"
      @click="onClose()"
    >
      <i :class="$sty.arrowLeft"></i>
    </div>

    <scroll-view
      :class="$sty.scrollView"
      :scroll-y="true"
    >
      <div :class="$sty.list">
        <div
          :class="$sty.wrap"
          :key="m"
          @click="onMonthClick(year,m-1)"
          v-for="m in 12"
        >
          <calendar-view
            :month="m-1"
            :onClick="()=>{}"
            :small="true"
            :year="year"
          />
        </div>
      </div>
    </scroll-view>
  </div>
</template>

<style lang="scss" module>
.container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(90deg, $main-yellow 0%, $main-red 100%) top/100% 50% no-repeat;
  transition: all 0.25s;

  &.hide {
    visibility: hidden;
    opacity: 0;
  }
}

.topBar {
  margin: 10px;
}

.arrowLeft {
  width: 30px;
  height: 30px;
  background: url('@/assets/icons/arrow-left.png') center/cover no-repeat;
}

.scrollView {
  flex: 1;
  padding-bottom: 20px;
  overflow-y: scroll;
  background-color: #fff;
}

.list {
  display: flex;
  flex-wrap: wrap;
}

.wrap {
  width: 50%;
  min-height: 200px;
  padding: 10px;
  box-sizing: border-box;
}
</style>
